<template>
	<view class="list">
		<view class="top">
			<image src="../../static/image/singlecover.png"></image>
			<text class="top_name">剑圣李白</text>
			<text class="iconfont iconmore"></text>
		</view>
		<view class="title">
			<text>晚安!</text>
			<text v-for="(item,index) of title_list">{{item}}</text>
		</view>
		<view class="video">
			<video objectFit="cover" src="http://feed.resrc.svideo.sogoucdn.com/videodown/110002/783/c7834d3dc7618143d9b710d60571d5be.mp4"></video>
		</view>
		<!-- 分享/点赞 -->
		<view class="box">
			<text>03-20</text>
			<text>分享</text>
			<text>评论</text>
			<text>赞</text>
		</view>
		<!-- 评论 -->
		<view class="comment">
			<text>4.9w人赞过</text>
			<view class="comment_details">
				<text>清流人民法院:</text>
				<text>大型双标现场大型双标现场大型双标现场大型双标现场大型双标现场大型双标现场大型双标现场大型双标现场大型双标现场大型双标现场大型双标现场大型双标现场大型双标现场我弄蒙顿哦国内国内你我弄蒙顿哦国内国内你我弄蒙顿哦国内国内你我弄蒙顿哦国内国内你我弄蒙顿哦国内国内你我弄蒙顿哦国内国内你我弄蒙顿哦国内国内你我弄蒙顿哦国内国内你我弄蒙顿哦国内国内你我弄蒙顿哦国内国内你我弄蒙顿哦国内国内你我弄蒙顿哦</text>
			</view>
			<text @tap="chakan">查看全部108条评论</text>
			<input type="text" placeholder="添加评论..." v-model="context" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title_list: ["燃烧的陀螺仪", "好人一生平安", "看到了吧", "胡子才是本体", "啊Q"],
			};
		},
		onLoad() {},
		methods: {
			chakan() {
				console.log(`查看了吧`);
			}
		},
	};
</script>

<style lang="scss" scoped>
	.list {
		padding: 20rpx 8rpx 20rpx 20rpx;
		background-color: #161725;
		color: #FFFFFF;
	}

	.top {
		display: grid;
		grid-template-columns: 100rpx auto 100rpx;
		place-items: center start;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		.top_name {
			letter-spacing: 2rpx;
		}

		.iconmore {
			place-self: center end;
		}
	}

	// 视频
	.video {
		height: 700rpx;
		border-radius: 8rpx;
		overflow: hidden;

		video {
			width: 80%;
			height: 100%;
		}
	}

	// 标题符号
	.title {
		margin: 20rpx 0rpx;
		display: flex;
		flex-wrap: wrap;

		text {
			margin-right: 10rpx;

			&:first-of-type {
				color: #C4C4C9;
			}

			&:not(:first-of-type) {
				color: #DABA45;

				&::before {
					content: "\e60b";
					font-family: "iconfont";
					font-size: 26rpx;
					color: #DABA45;
					margin-right: 2rpx;
				}
			}
		}
	}

	// 分享
	.box {
		display: flex;
		height: 80rpx;
		align-items: center;

		>text {
			&:first-of-type {
				flex: 1;
				font-size: 24rpx;
				color: #53525c;
			}

			&:not(:first-of-type) {
				font-size: 26rpx;
				@include flexCenterCenter;
				color: #a0a1ad;

				&::before {
					font-family: "iconfont";
					margin-right: 8rpx;
					font-size: 40rpx !important;
					color: #FFFFFF;
				}
			}

			&:nth-of-type(2) {
				&::before {
					content: "\e72f";
				}
			}

			&:nth-of-type(3) {
				margin: 0 40rpx;

				&::before {
					content: "\e66e";
				}
			}

			&:nth-of-type(4) {
				&::before {
					content: "\e602";
				}
			}
		}
	}

	// 添加评论内容
	.comment {
		display: flex;
		flex-direction: column;
		background-color: #1f1d2a;
		padding: 0 6px;

		>text {
			background-color: #1f1d2a;
			border: 2rpx solid #1c1c28;
			font-size: 24rpx;
			padding: 20rpx 0;
			border-radius: 8rpx;
		}

		>input {
			position: relative;
			padding-left: 60rpx;
			height: 60rpx;

			&::before {
				content: "\e667";
				font-family: "iconfont";
				position: absolute;
				z-index: 10;
				top: 50%;
				left: 5rpx;
				font-size: 38rpx;
				transform: translateY(-50%);
			}
		}
		
		>.comment_details {
			height: 80rpx;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			color: #7f7e8b;
			>text{
				&:first-of-type{
					color: #FFFFFF;
					margin-right: 4px;
				}
				&:last-of-type{
					font-size: 22rpx;
					color: #7f7e8b;
				}
			}
		}
	}
</style>
